<template>
  <div id="book">
     <div class="search">
    <el-input v-model="val"></el-input>
    <el-button class="btn" @click="find">搜索</el-button>
</div>
    <div id="book-item" 
    v-for="(item, index) in artData" :key="item.id" :index="index"
   
    >
      <h3 @click="lookPoke(item.title)">{{item.title}}</h3>
      
      <p>
        <!-- <el-button @click="deleteArt(item.author,item.id)">删除</el-button> -->
        <!-- <el-button @click="updateArt(item.author,item.id)">修改</el-button> -->
      </p>

    </div>

   
  </div>
</template>

<script>
import axios from 'axios';
import lookPokeVue from './lookPoke.vue';

export default {
name:'read',
components:{
lookPokeVue
},
data(){
  return {
    artData:'',
    val:''
  }
},
mounted(){
  this.showPoke();
 
},
methods:{
  showPoke(){
    if(this.artData!=='') return;
      axios.get("/show").then(res=>{
        // console.log(res);
       this.$store.commit('putArtdata',res.data.data)
      this.artData =  this.$store.state.artData
      
     }).catch(err=>{
      console.log(err);
     })
  },


  lookPoke(value){
    // console.log(value);
    this.$router.push({name:'Look',params:{
      title : value
    }})
  },

   find(){
       if(this.val == '')
       {
        this.showPoke();
       }
        axios.post('/findPoke',{
            title:this.val,
        }).then(res=>{
            console.log(res);
            this.result = res.data.data
            console.log(this.result);
                    this.$store.commit('putArtdata',this.result)
                //  console.log(this.$store.state.artData);
                  this.artData =  this.$store.state.artData
        }).catch(error=>{
            console.log(error);
        })
        

    },


    
 

}
}
</script>

<style lang="less" scoped>

#book-item{
  position: relative;
  flex-direction: column;
  height: 80px;
  border: 1px solid #d3d7d4;
  margin-bottom: 10px;
  background-color: #d3d7d4;
  h3{
    margin-left: 10px;
  }
  p{
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 10px;

  }
}
.search{
  position: fixed;
  top: 320px;
  left: 1300px;
  display: flex;
  justify-content:space-around;
  .btn{
    margin-left: 10px;
  }
}

</style>